<template>
  <div class="VipandFree">
    <!-- 书库以及vip排行 -->
    <div class="link">
      <div class="inner">
        <div class="stack-seniority">
          <img
            src=""
          />
          <div class="msg">
            <p>VIP书库</p>
            <p>381828本书</p>
          </div>
        </div>
        <div class="stack-seniority" @click="jumpRank">
          <img
            src=""
          />
          <div class="msg">
            <p>VIP排行</p>
            <p>每日更新</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 类型导航 -->
    <div class="Booktype">
      <ul>
        <li :class="{ active: active == 0 }" @click="active = 0">男生</li>
        <li :class="{ active: active == 1 }" @click="active = 1">女生</li>
        <li :class="{ active: active == 2 }" @click="active = 2">出版</li>
      </ul>
    </div>

    <!-- 重磅推荐 -->
    <manitoNewZuo :books="recommend"></manitoNewZuo>

    <!-- 热门畅销 -->
    <GeneralComThree :suspense="hot"></GeneralComThree>

    <!-- 都市休闲 -->
    <GeneralComThree :suspense="leisure"></GeneralComThree>

    <!-- 热血玄幻，王者归来 -->
    <GeneralComThree :suspense="blood"></GeneralComThree>

    <!-- 奇闻推理 -->
    <GeneralComThree :suspense="anecdote"></GeneralComThree>

    <!-- 唐宋明清 -->
    <GeneralComThree :suspense="dynasty"></GeneralComThree>
  </div>
</template>

<script>
import manitoNewZuo from "../views/manitoNewZuo";
import GeneralComThree from "../views/GeneralComThree";
export default {
    props:[
        'recommend',
        'hot',
        'leisure',
        'blood',
        'anecdote',
        'dynasty',
        ],
    components:{
            manitoNewZuo,
    GeneralComThree,
    },
      data() {
    return {
      banner: "",
      active: 0,
    //   recommend: [],
    //   hot: [],
    //   leisure: [],
    //   blood: [],
    //   anecdote: [],
    //   dynasty: [],
    };
  },
//   activated() {
//     this.getType();
//   },
  watch: {
    active(n) {
      switch (n) {
        case 0:
          this.$parent.getType("f47ef06703de47bea719dd9e7bda5381");
          break;
        case 1:
          this.$parent.getType("6a70a188b01e4d6c8c9749240a309ebb");
          break;
        case 2:
          this.$parent.getType("1369a8d6e24f4c239205c74f7d4fbc2a");
          break;
      }
    },
  },
  methods: {
    jumpRank() {
      this.$router.push({
        name: "RankingList",
        query: {
          type:
            this.active == 0 ? "male" : this.active == 1 ? "female" : "publish",
          listType: this.$route.path=='Vip'?'Vip':'Free',
        },
      });
    },
  },
}
</script>

<style>
</style>